<!--
  文件描述：
  创建时间：2023/7/31 13:55
  创建人：LiCY
-->
<template>
  <div class="">
    <a-modal
      ref="modal"
      :visible="visible"
      @ok="handleOk"
      width="1200px"
      @cancel="handleCancel"
      :maskClosable=false
      :destroyOnClose="destroyOnClose">
      <div>
        <a-table
          ref="table"
          size="middle"
          style="{ wordBreak:'break-all'}"
          class="j-table-force-nowrap"
          :scroll="{x:true}"
          bordered
          rowKey="recId"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
          :customRow="clickThenSelect"
          @change="handleTableChange">
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'

export default {
  name: 'SampleModal',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    visible: Boolean,
    destroyOnClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    // 这里存放数据
    return {
      dataSource: [],
      loading: false,
      selectedRowKeys: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '产线',
          align: 'center',
          dataIndex: 'line'
        },
        {
          title: '工站',
          align: 'center',
          dataIndex: 'op'
        },
        {
          title: '序列号',
          align: 'center',
          dataIndex: 'unitsn'
        },
        {
          title: '班次',
          align: 'center',
          dataIndex: 'shift'
        },
        {
          title: '加工时间',
          align: 'center',
          dataIndex: 'ctime'
        },
        {
          title: '点检结果',
          align: 'center',
          dataIndex: 'result',
          customRender: function(text) {
            if (text === '1') {
              return 'OK'
            } else if (text === '2') {
              return 'NG'
            } else {
              return text
            }
          }
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.recId = record.recId
            this.onSelectChange(record.recId.split(','), [record])
          }
        }
      }
    },
    handleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = selectionRows[0].recId
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    close() {
      console.log('关闭')
      this.$emit('close', false)
    },
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
